<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<style>

@media all and (orientation : landscape) { 

h2{color:red;}/*横屏时字体红色*/

} 

@media all and (orientation : portrait){ 

h2{color:green;}/*竖屏时字体绿色*/

} 

</style>

</head>

<body>

<h2>jquerymobile 判断手机横屏竖屏</h2>

</body>

</html>